<template>
  <el-card class="sales-card">
    <div class="sales-card-header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="销售额" name="first" />
        <el-tab-pane label="访问量" name="second" />
      </el-tabs>
      <div class="sales-header-date">
        <span @click="setToday">今日</span>
        <span @click="setWeek">今周</span>
        <span @click="setMonth">今月</span>
        <span @click="setYear">今年</span>
        <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" value-format="yyyy-MM-dd" />
      </div>
    </div>
    <div class="sales-card-body">
      <el-row :gutter="20">
        <el-col :lg="18" :md="18" :xs="24">
          <div ref="saleBarChart" class="sale-bar-chart" />
        </el-col>
        <el-col :lg="6" :md="6" :xs="24">
          <h5>门店销售额排名</h5>
          <ul>
            <!-- <li>
              <span class="sale-num">1</span><span>肯德基</span><span>323,234</span>
            </li> -->

            <li v-for="(item,index) in activeName==='销售额'?homeList.orderRank:homeList.userRank" :key="index"><span :class="{'sale-num':index<3}">{{ item.no }}</span><span>{{ item.name }}</span><span>{{ item.money }}</span></li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>

</template>

<script>
import { mapState } from 'vuex'
import * as dayjs from 'dayjs'
import * as echarts from 'echarts'
export default {
  name: 'Sales',
  data() {
    return {
      activeName: '销售额',
      date: '',
      saleEcharts: ''
    }
  },
  computed: {
    ...mapState('home', ['homeList'])
  },
  mounted() {
    this.getHomeList()
    this.saleEcharts = echarts.init(this.$refs.saleBarChart)
    this.saleEcharts.setOption({
      title: {
        text: '销售额趋势',
        textStyle: {
          fontSize: '14px'
        },
        top: '20px'
      },
      tooltip: {
        trgger: 'axis',
        axisPoiner: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: 'true'
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          data: [52, 200, 334, 390, 330, 220, 330, 440, 520, 450, 470, 290],
          barWidth: '35%'
        }
      ]
    })
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
      const { orderFullYearAxis, orderFullYear, userFullYearAxis, userFullYear } = this.homeList
      this.saleEcharts.setOption({
        title: {
          text: this.activeName === '销售额' ? '销售额趋势' : '访问量趋势'
        },
        xAxis: {
          data: this.activeName === '销售额' ? orderFullYearAxis : userFullYearAxis
        },
        series: { data: this.activeName === '销售额' ? orderFullYear : userFullYear }
      })
    },
    setToday() {
      const today = dayjs().format('YYYY-MM-DD')
      this.date = [today, today]
    },
    // zhou
    setWeek() {
      const start = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')
      const end = dayjs().eddOf('week').add(1, 'day').format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 月
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 年
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      this.date = [start, end]
    }
  }
}
</script>

<style lang="scss" scoped>
.sales-card {
  margin-top: 10px;
  .sales-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0;
    border-bottom: 1px solid #e4e7ed;
    .sales-header-date {
      span {
        margin-right: 20px;
        font-size: 14px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .sale-bar-chart {
    padding-top: 10px;
    width: 100%;
    height: 300px;
  }
  .sales-card-body {
    padding: 0 20px;
    ul {
      list-style: none;
      padding: 0;
      li {
        height: 36px;
        line-height: 36px;
        span {
          margin: 0 20px;
          //第1列span标签的样式
          &:first-child {
            width: 20px;
            height: 20px;
            line-height: 22px;
            display: inline-block;
            margin-left: 0;
            text-align: center;
          }
          &.sale-num {
            background-color: #000;
            border-radius: 50%;
            color: #fff;
          }
          &:last-child {
            float: right;
          }
        }
      }
    }
  }
}
</style>
